<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
        .box1 {
            width: 200px;
            height: 300px;
            background-color: pink;

            /* 
                2.使用动画  动画名+时间
            */
            animation: change 2s;
        }

        /* 
            1.定义动画
            @keyframes+动画名

        */


        /* 动画1 */
        /* 宽度从200-->900,只有两个阶段,使用from to */
        @keyframes change {
            from {
                width: 200px;
            }

            to {
                width: 900px;
            }
        }

        /* 动画2 
            先200*200变化到 400*300 再变化到600*400
        */

        .box2 {
            width: 200px;
            height: 200px;
            background-color: red;

            animation: change2 5s;
        }

        @keyframes change2 {
            0% {
                width: 200px;
                height: 200px;
            }

            50% {
                width: 400px;
                height: 300px;
            }

            100% {
                width: 600px;
                height: 400px;
            }
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>